import React, { Component ,lazy, } from 'react';
import '../../scss/Footer.scss';
import { Route,Switch,Redirect } from 'react-router-dom'
import { AppstoreAddOutlined , PicRightOutlined , WindowsOutlined , HeartOutlined , ShoppingCartOutlined,AntCloudOutlined} from '@ant-design/icons';


var index = lazy( ()=> import('./Index') )
var classify = lazy( ()=> import('./Classify') )
var indextwo = lazy( ()=> import('./IndexTwo') )
var mycenter = lazy( ()=> import('../myCenter/Mycenter') )
var shoppingcart = lazy( ()=> import('../index/Shoppingcart') )
var allshopping = lazy( ()=> import('../index/Allshopping') )

class Footer extends Component {
    state = {
        footerArr:[
            {name:'首页',pic:<AppstoreAddOutlined />},
            {name:'分类',pic:<PicRightOutlined />},
            {name:'推荐商品',pic:<AntCloudOutlined />},
            {name:'全部商品',pic:<WindowsOutlined />},
            {name:'购物车',pic:<ShoppingCartOutlined />},
            {name:'个人中心',pic:<HeartOutlined />},
        ],
        selectColor:0,
    }
    render() {
        return (
            <>
                  <Switch>
                        <Route exact path="/index/index" component={index} />
                        <Route exact path="/index/classify" component={classify} />
                        <Route exact path="/index/indextwo" component={indextwo} />
                        <Route exact path="/index/mycenter" component={mycenter} />
                        <Route exact path="/index/shoppingcart" component={shoppingcart} />
                        <Route exact path="/index/allshopping" component={allshopping} />
                        <Redirect exact from='/index' to="/index/index"/>
                  </Switch>
            <div className='footer'>
                {
                    this.state.footerArr.map((item,index) => {
                            return (
                        <div onClick={ () => { this.indexCut( index ) } } className= { `mode  ${ this.state.selectColor == index ? 'active' : '' }` } key={ index }>
                            <div className="cneter" key={ index }>
                            <div className='top'><i> { item.pic } </i></div>
                            <div className='bottom' > { item.name } </div>
                        </div>
                    </div>
                        )
                    })
                }
            </div>
            </>
        );
    }
    // 更改 state 状态中匹配的下标
    indexCut = (index) => {
        this.setState({ selectColor:index })

        if( index == 0 ) {
            this.props.history.push({ pathname:'/index/index' });
        }
        if( index == 1 ) {
            this.props.history.push({ pathname:'/index/classify' });
        }
        if( index == 2 ) {
            this.props.history.push({ pathname:'/index/indextwo' });
        }
        if( index == 3 ) {
            this.props.history.push({ pathname:'/index/allshopping' });
        }
        if( index == 4 ) {
            this.props.history.push({ pathname:'/index/shoppingcart' });
        }
        if( index == 5 ) {
            this.props.history.push({ pathname:'/index/mycenter' });
        }
    }
}

export default Footer;